import Tittle from "../Tittle";
import Card from "../Card";
import HttpUtils from "@page/common/utils/HttpUtils";
import urlHook from "@page/common/utils/urlHook";
import Input from "@ui/RJMart/input";

import "./style.scss";

class MoneyCard extends React.Component {
    constructor() {
        super();
        this.state = {
            cardList: null
        };
        this.orgId = Uts.getCookie("orgId"); //医院、学校的唯一ID
        this.onlySelectCardList = ["36", "35", "37"]; //只能选一个经费卡的id集合
        this.idIndex = this.onlySelectCardList.indexOf(this.orgId) || -1;
        this.fundCards = [];
    }

    componentDidMount() {
        this.getFundCards(this.props.deptId);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.deptId !== nextProps.deptId) {
            console.log(nextProps);
            this.getFundCards(nextProps.deptId);
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.deptId == nextProps) {
            return false;
        }
        return true;
    }

    //获取经费卡列表
    getFundCards(id) {
        let params = { deptId: id, pageNo: 1, pageSize: 10000 };
        HttpUtils.getFundCards(params)
            .then(res => {
                console.log(res);
                res.fundCards &&
                    res.fundCards.forEach((v, k) => {
                        v.isSelect = false;
                    });
                this.fundCards = res.fundCards;
                this.setState({
                    cardList: res.fundCards
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    //选中经费卡的cb
    selectCard(index, list) {
        if (this.idIndex > -1) {
            list.forEach((v, k) => {
                v.isSelect = index === k ? true : false;
            });
        } else {
            list[index].isSelect = !list[index].isSelect;
        }
        this.setState({
            cardList: list
        });

        let tmplArr = [];
        list.forEach(v => {
            if (v.isSelect) {
                tmplArr.push(v.cardId);
            }
        });
        console.log(tmplArr);

        this.props.selectCard(tmplArr);
    }

    jump = () => {
        window.open(urlHook.cardList, "_blank");
    };

    searchCard = e => {
        let tmplArr = this.fundCards.filter((v, i) => {
            return (
                v.projectName.indexOf(e.target.value) > -1 ||
                v.cardNo.indexOf(e.target.value) > -1
            );
        });
        this.setState({
            cardList: tmplArr
        });
    };

    render() {
        const { cardList } = this.state;
        let tittleObj = {
            "9": "项目信息",
            "18": "*经费卡信息",
            "23": "经费本信息"
        };
        return (
            <div className="rj_money_info">
                <div className="rj_money-wp zen_ps-re">
                    {["38"].indexOf(this.orgId)== -1 && (
                    <Tittle text={tittleObj[this.orgId] || "经费卡信息"} />
                    )}
                    {cardList && ["38"].indexOf(this.orgId)== -1 && (
                        <div className="zen_m-b-20">
                            <Input.Search
                                type="normal"
                                placeholder="经费卡名称\卡号"
                                onSearch={this.searchCard}
                            />
                        </div>
                    )}
                    <div className={Uts.sc(['rj_wp-card-list rj_l-scroll',cardList&&cardList.length<=7?'rj_l_scroll-none':''])}>
                        {cardList &&
                            cardList.map((val, index) => {
                                return (
                                    <Card
                                        key={index}
                                        select={val.isSelect}
                                        onClick={this.selectCard.bind(
                                            this,
                                            index,
                                            cardList
                                        )}
                                        data={val}
                                        counts={cardList.length}
                                    />
                                );
                            })}
                        {["37", "38"].indexOf(this.orgId) == -1 && (
                            <Card
                                deptId={this.props.deptId}
                                updateData={this.getFundCards.bind(this)}
                                isShowAdd={true}
                            />
                        )}
                    </div>
                    {["37", "38"].indexOf(this.orgId) == -1 && (
                        <span className="rj_l-card-man" onClick={this.jump}>
                            管理经费卡
                        </span>
                    )}
                </div>
            </div>
        );
    }
}

export default MoneyCard;
